<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
	<title>用户设置</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/message.css">
	<link rel="stylesheet" href="../css/cropper.min.css">
	<link rel="stylesheet" href="../css/amazeui.min.css">
	<link rel="stylesheet" href="../css/amazeui.cropper.css">
	<style>
		body {
			background: #ddd;
		}

		.avator {
			width: 80px;
			height: 80px;
		}

		.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
			background: #aaa;
		}

		.nav>li>a:focus, .nav>li>a:hover {
			background: #aaa;
		}

		.nav.nav-pills li a {
			color: #fff;
		}

		.list-group-item {
			background: #eee;
			color: #aaa;
		}

		.form-control {
			width: unset;
		}

		.list-group-item:after {
			content: '';
			display: block;
			clear: both;
		}

		.up-frame-bj .up-frame-radius {
			padding-bottom: 20px;
			border-radius: 5px;
		}

		.up-frame-parent .up-frame-header {
			height: 50px;
			padding: 0px;
			line-height: 50px;
			border-bottom: solid 1px #e5e5e5;
		}

		.up-frame-parent .up-frame-header label {
			font-size: 16px;
			float: left;
			margin-left: 14px;
			color: #808080;
		}

		.up-frame-parent .up-frame-body {
			padding: 20px;
		}

		.up-frame-parent .up-pre-before {
			width: 327px;
			height: 327px;
			padding: 0px;
			float: left;
			background: #fcfcfc;
			border: 1px solid #e3e3e3;
		}

		.up-frame-parent .up-pre-before img {
			width: 100%;
		}

		.up-frame-parent .up-frame-body .up-pre-after {
			background: #fcfcfc;
			overflow: hidden;
			width: 186px;
			height: 186px;
			border: 1px solid #e3e3e3;
			float: left;
			margin-left: 25px;
		}

		.up-frame-parent .up-control-btns {
			width: 150px;
			height: 30px;
			margin-left: auto;
			margin-right: auto;
			background: #dddddd;
			text-align: center;
			line-height: 30px;
			margin-top: 30px;
		}

		.up-frame-parent .up-control-btns span {
			width: 30%;
		}

		@media screen and (max-width: 1024px) {
			.up-frame-parent .up-pre-before {
				width: 100%;
			}

			.up-frame-parent .up-frame-body .up-pre-after {
				margin-left: 0px;
				margin-top: 10px;
			}
		}
	</style>
</head>
<body>
	<!-- 导航条 -->
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="../index.html">贴吧</a>
			</div>
			<nav id="bs-navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
				</ul>
				<ul class="nav navbar-nav navbar-right">
				</ul>
			</nav>
		</div>
	</nav>

	<!-- 主体内容 -->
	<div class="container">
		<div class="row">
			<!-- 左侧菜单 -->
			<div class="col-md-3">
				<ul class="nav nav-pills nav-stacked">
					<li role="presentation" class="active">
						<a href="#">个人信息</a>
					</li>
				</ul>
			</div>
			<!-- 主体 -->
			<div class="col-md-9">

			</div>
		</div>
	</div>

	<!-- 裁剪头像 model -->
	<div id="avator-model" class="am-modal am-modal-no-btn up-frame-bj" tabindex="-1">
		<div class="am-modal-dialog up-frame-parent up-frame-radius">
			<div class="am-modal-hd up-frame-header">
				<label>修改头像</label>
				<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
			</div>
			<div class="am-modal-bd  up-frame-body">
				<div class="am-g am-fl">
					<div class="am-form-group am-form-file">
						<div class="am-fl">
							<button type="button" class="am-btn am-btn-default am-btn-sm">
								<i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
						</div>
						<input type="file" id="inputImage">
					</div>
				</div>
				<div class="am-g am-fl">
					<div class="up-pre-before up-frame-radius">
						<img alt="" src="" id="image">
					</div>
					<div class="up-pre-after up-frame-radius">
					</div>
				</div>
				<div class="am-g am-fl">
					<div class="up-control-btns">
						<span class="am-icon-rotate-left" onclick="rotateimgleft()"></span>
						<span class="am-icon-rotate-right" onclick="rotateimgright()"></span>
						<span class="am-icon-check" id="up-btn-ok" url="/upload/base64"></span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/template-web.js"></script>
	<script src="../js/message.js"></script>
	<script src="../js/cropper.js"></script>
	<script src="../js/amazeui.min.js"></script>

    <!-- 用户信息模板(右上角) -->
    <script id="userinfo_template" type="text/html">
        <li class="dropdown">
            <a id="drop" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                {{username}}
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="drop">
                <li><a href="../index.html">主页</a></li>
                <li><a href="../post/save.html">发帖</a></li>
                <li role="separator" class="divider"></li>
                <li><a class="logout" href="#">退出登录</a></li>
            </ul>
        </li>
    </script>

	<!-- 用户信息设置模板 -->
    <script id="setting_template" type="text/html">
		<ul class="list-group">
			<li class="list-group-item">
				<div class="row">
					<div class="col-md-2 col-xs-4">
						<img src="{{avator}}" class="img-circle avator">
					</div>
					<div class="col-md-10 col-xs-8" style="height: 80px; line-height: 80px;">
						<button type="button" class="btn btn-warning edit-avator_btn">更改头像</button>
					</div>
				</div>
			</li>
			<li class="list-group-item">
				<div class="row">
					<div class="col-md-2  col-xs-4">用户名</div>
					<div class="col-md-10  col-xs-8">{{username}}</div>
				</div>
			</li>
			<li class="list-group-item">
				<div class="row">
					<div class="col-md-2 col-xs-4">昵称</div>
					<div class="col-md-10 col-xs-8">
						<input type="text" name="nickname" class="form-control" placeholder="昵称" value="{{nickname}}" style="color: #aaa">
					</div>
				</div>
			</li>
			<li class="list-group-item">
				<button type="submit" class="btn btn-warning submit" style="float: right">保存</button>
			</li>
		</ul>
    </script>

    <script>
        $(function() {
        	// 用户信息
			var user = {};

			// 发送一条请求查询是否登陆
			$.get('/user/current', function (resp) {
				// 拿到用户信息
				user = resp;

				// 模板渲染
				var html = template('userinfo_template', resp);
				$('.navbar .navbar-collapse .navbar-right').html(html);
				html = template('setting_template', resp);
				$('.container>.row>.col-md-9').html(html);
			})

			// 左侧菜单切换效果
			$('.nav li a').on('click', function () {
				$(this).parent('li').addClass('active').siblings().removeClass('active');
			})

			// 保存
			$(document).on('click', '.submit', function () {
				user.nickname = $('input[name="nickname"]').val();
				user.avator = $('.avator').attr('src');

				$.ajax({
					url: '/user',
					type: 'PUT',
					data: user,
					success: function(resp) { // 修改成功
						$.message(resp.message);
					},
					error: function (resp) { // 修改失败
						$.message({
							message:'修改失败',
							type:'error'
						});
					}
				});
			})

			// 初始化
			var $image = $('#image');
			$image.cropper({
				aspectRatio: '1',
				autoCropArea: 0.8,
				preview: '.up-pre-after',
			});

			// 点击修改头像按钮
			$(document).on('click', '.edit-avator_btn', function () {
				$("#avator-model").modal({width: '600px'});
			});

			// 上传文件改变时
			$(document).on('input propertychange', '#inputImage', function () {
				var files = this.files;
				var file;

				if (files && files.length) {
					file = files[0];

					if (/^image\/\w+$/.test(file.type)) {
						blobURL = URL.createObjectURL(file);
						$image.one('built.cropper', function () {
							// Revoke when load complete
							URL.revokeObjectURL(blobURL);
						}).cropper('reset').cropper('replace', blobURL);
						$(this).val('');
					} else {
						window.alert('Please choose an image file.');
					}
				}
			})

			//绑定上传事件
			$(document).on('click', '#up-btn-ok', function () {
				var img_src = $image.attr('');
				if (img_src == '') {
					$.message({
						message: '请选择要上传的图片',
						type: 'warning'
					});
					return;
				}

				var url = $(this).attr('url');
				var canvas = $('#image').cropper('getCroppedCanvas');
				var data = canvas.toDataURL(); //转成base64
				$.ajax({
					url: url,
					dataType: 'json',
					type: 'POST',
					data: {base64: data.toString()},
					success: function (resp) {
						$("#avator-model").modal();
						$('.avator').attr('src', resp.data.path);
						$.message('头像上传成功')
					},
					error: function (resp) {
						$.message({
							message: '头像上传失败',
							type: 'error'
						});
					}
				});
			})

			function rotateimgright() {
				$("#image").cropper('rotate', 90);
			}

			function rotateimgleft() {
				$("#image").cropper('rotate', -90);
			}

			// 退出登录
			$(document).on('click', '.logout', function () {
				$.get('/user/logout', function (resp) {
					window.location.href = '../index.html'
				})
			})
        })
    </script>
</body>
</html>
